<template>
  <div class="chinaecharts">
    <div id="mapChart" ref="mapChartRef" ></div>
  </div>
  <div  style="display: flex;">
    <div id="chart01" style="width: 1600px; height: 600px;"></div>
  </div>
</template>
<script setup>
import orderApi from "@/api/orderApi.js";
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import adminApi from "@/api/adminApi.js";
function chart01() {
  let my = echarts.init(document.getElementById('chart01'));
  adminApi.firstEchart()
      .then(resp => {
        let name = [];
        let count = [];
        for (let index = 0; index < resp.data.length; index++) {
          name[index] = resp.data[index].goods.name;
          count[index] = resp.data[index].count;
        }
        var option = {
          title: {
            text: '销售榜单',
            textStyle: {
              color: "#000"
            }
          },
          xAxis: {
            type: 'category',
            data: name,
            axisLabel: {
              interval: 0
            }
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: count,
              type: 'bar',
              tooltip: {
                show: true
              }
            }
          ]
        };
        // 渲染图表
        my.setOption(option);
      });
}



onMounted(() => {
  chart01();
});
const mapInfo = ref([]);

function getProCount() {
  orderApi.getProCount()
      .then(resp => {
        console.log(resp.data); // 打印返回数据
        mapInfo.value = resp.data;
        mapFn();
      })
}
getProCount();


const mapChartRef = ref(null);

const mapFn = () => {
  const mapChart = echarts.init(mapChartRef.value);

  mapChart.setOption({
    backgroundColor: "",
    title: {
      text: "",
      subtext: "",
      color: "#fff",
      x: "center",
    },
    visualMap: {
      type: "piecewise",
      top: "bottom",
      right: 10,
      splitNumber: 6,
      seriesIndex: [0],
      itemWidth: 20,
      itemGap: 2,
      pieces: [
        { gte: 41, label: "41单以上", color: "#1890FF" },
        { gte: 31, lte: 40, label: "31-40单", color: "#83C2FF" },
        { gte: 21, lte: 30, label: "21-30单", color: "#CDE5FF" },
        { gte: 11, lte: 20, label: "11-20单", color: "#E6F1FF" },
        { gte: 1, lte: 10, label: "1-10单", color: "#EBF3FF" },
        { lte: 0, label: "无", color: "#FAFAFA" },
      ],
      textStyle: {
        color: "#737373",
      },
    },
    tooltip: {
      show: true,
      trigger: "item",
      formatter: "{b}-订单数量：{c}",
    },
    series: [
      {
        name: "地图",
        type: "map",
        map: "china",
        data: [
          { name: "北京", value: mapInfo.value.find(item => item.pro === "北京市")?.procount || 0 },
          { name: "天津", value: mapInfo.value.find(item => item.pro === "天津市")?.procount || 0 },
          { name: "上海", value: mapInfo.value.find(item => item.pro === "上海市")?.procount || 0 },
          { name: "重庆", value: mapInfo.value.find(item => item.pro === "重庆市")?.procount || 0 },
          { name: "河北", value: mapInfo.value.find(item => item.pro === "河北省")?.procount || 0 },
          { name: "河南", value: mapInfo.value.find(item => item.pro === "河南省")?.procount || 0 },
          { name: "云南", value: mapInfo.value.find(item => item.pro === "云南省")?.procount || 0 },
          { name: "辽宁", value: mapInfo.value.find(item => item.pro === "辽宁省")?.procount || 0 },
          { name: "黑龙江", value: mapInfo.value.find(item => item.pro === "黑龙江省")?.procount || 0 },
          { name: "湖南", value: mapInfo.value.find(item => item.pro === "湖南省")?.procount || 0 },
          { name: "安徽", value: mapInfo.value.find(item => item.pro === "安徽省")?.procount || 0 },
          { name: "山东", value: mapInfo.value.find(item => item.pro === "山东省")?.procount || 0 },
          { name: "新疆", value: mapInfo.value.find(item => item.pro === "新疆维吾尔自治区")?.procount || 0 },
          { name: "江苏", value: mapInfo.value.find(item => item.pro === "江苏省")?.procount || 0 },
          { name: "浙江", value: mapInfo.value.find(item => item.pro === "浙江省")?.procount || 0 },
          { name: "江西", value: mapInfo.value.find(item => item.pro === "江西省")?.procount || 0 },
          { name: "湖北", value: mapInfo.value.find(item => item.pro === "湖北省")?.procount || 0 },
          { name: "广西", value: mapInfo.value.find(item => item.pro === "广西壮族自治区")?.procount || 0 },
          { name: "甘肃", value: mapInfo.value.find(item => item.pro === "甘肃省")?.procount || 0 },
          { name: "山西", value: mapInfo.value.find(item => item.pro === "山西省")?.procount || 0 },
          { name: "内蒙古", value: mapInfo.value.find(item => item.pro === "内蒙古自治区")?.procount || 0 },
          { name: "陕西", value: mapInfo.value.find(item => item.pro === "陕西省")?.procount || 0 },
          { name: "吉林", value: mapInfo.value.find(item => item.pro === "吉林省")?.procount || 0 },
          { name: "福建", value: mapInfo.value.find(item => item.pro === "福建省")?.procount || 0 },
          { name: "贵州", value: mapInfo.value.find(item => item.pro === "贵州省")?.procount || 0 },
          { name: "广东", value: mapInfo.value.find(item => item.pro === "广东省")?.procount || 0 },
          { name: "青海", value: mapInfo.value.find(item => item.pro === "青海省")?.procount || 0 },
          { name: "西藏", value: mapInfo.value.find(item => item.pro === "西藏自治区")?.procount || 0 },
          { name: "四川", value: mapInfo.value.find(item => item.pro === "四川省")?.procount || 0 },
          { name: "宁夏", value: mapInfo.value.find(item => item.pro === "宁夏回族自治区")?.procount || 0 },
          { name: "海南", value:  0 },
          { name: "台湾", value:  0 },
          { name: "香港", value:  0 },
          { name: "澳门", value:  0 },
          { name: "南海诸岛", value:  0 },
        ],
        itemStyle: {
          normal: {
            label: { show: true },
            areaStyle: { color: "#FAFAFA" },
            borderWidth: 1,
            borderColor: "#D9D9D9",
          },
          emphasis: {
            label: { show: true },
            areaStyle: { color: "#90c31d" },
          },
        },
        zoom: 1,
        label: { show: true },
      },
      {
        type: "scatter",
        showEffectOn: "render",
        coordinateSystem: "geo",
        symbolSize: 10,
        data: [{ name: "宜昌", value: [111.3, 30.7, 130] }],
        zlevel: 99999,
      },
    ],
  });

  window.addEventListener("resize", () => {
    mapChart.resize();
  });
};

onMounted(() => {
  mapFn();
});
</script>
<style scoped>
.chinaecharts {
  width: 100%;
  height: 100vh;
}
#mapChart {
  width: 100%;
  height: 100%;
}
</style>
